<template>
    <div class="chart-wrap">
       <div class="title">
          <span v-text="name"></span>
          <div class="tools">
            <el-select v-model="query.dateType" placeholder="请选择">
              <el-option
                v-for="item in dateTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="query.startDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-date-picker
              v-model="query.endDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
       </div>
       <div class="chart">
           <div ref="chart" class="content" ></div>
       </div>
    </div>
</template>

<script>
    import mixin from '../mixs/mixin.js';
    import echarts from "echarts";
    export default {
        name: "chart_1" ,
        mixins: [mixin],
        props: {
          name: {
            type: String,
            default: '表名称'
          },
          category:{
            type: String,
            default: 'News' //分类 News,Paper,Patent
          }
        },
        data() {
          let startDate = new Date(`${new Date().getFullYear()}/1/1`).Format('yyyy-MM-dd');
          let endDate = new Date().Format('yyyy-MM-dd');
          return {
            apiUrl:'newtechanalyse/technologyHotspot',
            dateTypeList:[
              {label:'月',value:'Month'},
              {label:'天',value:'Day'}
            ],
            query:{
              startDate:startDate, //开始时间
              endDate:endDate, //结束时间
              dateType:'Month', //Month,Day 查询时间类型
              category:'News', //分类 News,Paper,Patent
            },
            xData:[],
            yData:[]
          }
        },
        mounted(){
          this._initChart();
        },
        methods: {
          _initChart() {
             this.$nextTick(()=>{
                 if(!this._vmEchart){
                   this._vmEchart = echarts.init(this.$refs.chart);
                   this._vmEchart.showLoading();
                 }
             })
          },
          asyncDate(){
            //  异步加载数据  通用方法
            if(!this._vmEchart) return;
            this._vmEchart.clear();
            this._vmEchart.showLoading();
            this.api({
              url: this.apiUrl,
              method: "post",
              data:this.$qs.stringify({...this.query,topicId:this.navCurrentId})
            }).then(data => {
               this._formatDate(data)
            });
          },
          getDataURL(){
            // 获取图片base64
            return new Promise((resolve,reject)=>{
              if(!this._vmEchart){reject(); return; }
              resolve(this._vmEchart.getDataURL({
                backgroundColor: this.exportEchartBg
              }))
            });
          },
          _formatDate(data){
            // 根据不同的数据 配合不同的方法
            let xData = [];
            let yData = [];
           // articleNum  paperNum  patentNum
            yData = data.keyword;
            //分类 News,Paper,Patent
            if(this.category.toLowerCase() == 'news'){
              xData = data.articleNum;
            }else if(this.category.toLowerCase() == 'paper'){
              xData = data.paperNum;
            }else if(this.category.toLowerCase() == 'patent'){
              xData = data.patentNum;
            }
            this.xData = xData.reverse();
            this.yData = yData.reverse();
            this._setOption();
          },
          _setOption(){
             let bottomLength = (()=>{
               let _maxlengh = 15;
               if( this.yData.length >= _maxlengh){
                 return '4%'
               }else{
                 return `${ (_maxlengh - this.yData.length)/_maxlengh * 90  }%`;
               }
             })();
             console.log(bottomLength);
             let option = {
               color:['#dd8f04','#6459f0', '#00a3fa'],
               tooltip: {
                 trigger: "axis",
                 axisPointer: {
                   // 坐标轴指示器，坐标轴触发有效
                   type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                 }
               },
               // dataZoom: [
               //   {
               //     type: 'inside',
               //     show: true,
               //     xAxisIndex: [0],
               //     zoomOnMouseWheel:true,
               //     filterMode: 'empty',
               //     startValue:[0],
               //     endValue:[3]
               //   },
               // ],
               grid: {
                 left: "13",
                 right: "13",
                 top: "3%",
                 bottom: bottomLength,
                 containLabel: true
               },
               xAxis: {
                 type: "value",
                 axisTick: {
                   show: false,
                   alignWithLabel: true
                 },
                 splitLine: {
                   show:false,
                   lineStyle: {
                     type: "dashed",
                     color: "#054e76" //分割线颜色
                   }
                 },
                 axisLine: {
                   show:false,
                   lineStyle: {
                     color: "#98caec", //坐标轴线颜色
                     width: 2,

                   }
                 },
                 axisLabel: {
                   show:false,
                   color: "#a1d6f8" //坐标轴名称颜色
                 }
               },
               yAxis: {
                 data: this.yData,
                 type: 'category',
                 // 轴线
                 axisLine: {
                   show: false,
                   boundaryGap: true
                 },
                 // 刻度
                 axisTick: {
                   show: false,
                   alignWithLabel: true,
                   boundaryGap: true
                 },
                 axisLabel: {
                   show: true,
                   margin: 12,
                   textStyle: {
                     fontSize: 14,
                     lineHeight:16,
                     color: '#333'
                   },
                   formatter: function(name) {
                     // 当名称长度超过10,进行回行处理且循环持续, 防止过长
                     var result = '';
                     for (var i = 0, len = name.length; i < len; i++) {
                       result += name[i];
                       if (i >= 9 && (i % 9 === 0)) {
                         result += '\n';
                       }
                     }
                     return result;
                   },
                   interval:0,
                 }

               },
               series: [
                   {
                     name:'数量',
                     type: 'bar',
                     barCategoryGap: '50%',
                     barWidth: 16,
                     label: {
                       normal: {
                         show: true,
                         position: 'right',
                         // 图示标签显示内容格式化
                         formatter: function(item) {
                           return Number(item.value).toFixed(0);
                         }
                       }
                     },
                     itemStyle: {
                       normal: {
                         color: '#003579',
                         barBorderRadius: [0, 50, 50, 0],
                         shadowColor: 'rgba(0,0,0,0.1)',
                         shadowBlur: 3,
                         shadowOffsetY: 3
                       }
                     },
                     data: this.xData,
                   },
                 ]
               };

              this._vmEchart.hideLoading();
              this._vmEchart.setOption(option)
          }
        },


    }
</script>

<style lang="scss" scoped>
    .chart{
      position: relative;
      .content{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

</style>
